<template>
	<view class="app-header">
			<view class="header-text"  :style="{paddingTop:paddingTop+'px',height:titleHeight+'px'}"> 
				{{props.title}}
				<view class="notice">
					<slot></slot>
				</view>
			</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
	const paddingTop = ref(0)
	 const titleHeight = ref(44)
	 
	 const props = defineProps({
		 title:{
			 type:String,
			 default:"页面标题"
		 }
	 })
	 
	const getHeight = ()=>{
		// 只有小程序才运行
		// #ifdef MP 
			// 状态栏高度
		 let systemInfo = uni.getSystemInfoSync()
		 paddingTop.value = systemInfo.statusBarHeight;
		 // 胶囊的高
		 let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		 titleHeight.value = menuButtonInfo.height+6
		 // #endif
		 
		 // app 需要获取状态栏高度 并设置pading
		 // #ifdef APP
			let systemInfo = uni.getSystemInfoSync()
			paddingTop.value = systemInfo.statusBarHeight;
		 // #endif
		 
	}
	
	getHeight()
	
</script>

<style lang="scss" scoped>
.app-header{
		width: 750rpx;
		height: 480rpx;
		background: url('@/static/imgs/headerBg.png');
	}
	.header-text{
		position: relative;
		font-size: 32rpx;
		width: 750rpx;
		height: 50px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.notice{
		 position: absolute;
		 bottom: 18rpx;
		 left: 40rpx;
		
		
		 
	}
</style>